<template>
  <el-card>
    <el-form>
      <el-row>
        <el-col :span="3">
          <el-form-item>

            <el-button
              type="text"
              @click="getPre"
            >上一题</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <span>{{entity.sortNum}}.{{entity.content}}
            </span>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item>
            <el-button
              type="text"
              @click="getNext"
            >下一题</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="3">
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <el-radio-group
              ref="radio1"
              v-model="radio1"
              size="small"
              @change="handleChangeRadio"
            >
              <div
                v-for="(item,index) in entity.items"
                :key="index"
                class="text item"
              >

                <el-radio
                  :label="item"
                  border
                >{{ item}}</el-radio>
              </div>
            </el-radio-group>
          </el-form-item>
        </el-col>

      </el-row>

    </el-form>
  </el-card>
</template>

<script>
import * as PaperApi from '@/api/base/paper'
import axios from 'axios'

export default {
  name: 'PaperItem',
  data() {
    return {
      radio1: '1',
      url: '',
      entityId: '',
      entity: {
        items: [
          { num: '无数据', content: '无数据' }
          // { num: 'A', content: '11' },
          // { num: 'B', content: '22' },
          // { num: 'C', content: '33' },
          // { num: 'D', content: '44' }
        ]
      }
    }
  },
  created() {
    this.entityId = this.$route.query.id || ''
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const _this = this
      const actionUrl = this.HOST + '/base/answer-base-paper-item/' + 'initEditPage'
      axios({
        url: actionUrl,
        method: 'post',
        params: { id: this.entityId }
      }).then(response => {
        console.log('response')
        console.log(response)
        _this.entity = response.data
        let items = []
        const contentDetail = response.data.contentDetail || ''

        if (contentDetail) {
          items = contentDetail.split(';')
        }
        // 答案
        _this.entity.items = items
      })
    },
    handleChangeRadio(data) {
      // debugger
      if (data) {
        let youAnswer = data.substr(0, 1)
        if (youAnswer == this.entity.answer) {
          this.$message({ message: '回答正确！答案是：' + this.entity.answer, type: 'success' })
        } else {
          this.$message({ message: '回答错误！', type: 'error' })
        }
        // this.$refs.radio1.disabled = true
        // 获取答案
        // api.getAnswerItem(id)
        // 判断对错
      }
    },
    getNext() {
      // 跳转路由
      // const path = this.$route.path
      // this.$router.push({ path: path + '?id=' + (Number(this.entityId) + 1) })
      const _this = this
      const actionUrl = this.HOST + '/base/answer-base-paper-item/' + 'initEditPage'
      this.entityId = Number(this.entityId) + 1
      axios({
        url: actionUrl,
        method: 'post',
        params: { id: this.entityId }
      }).then(response => {
        console.log('response')
        console.log(response)
        _this.entity = {}
        if (response.data) {
          _this.entity = response.data
          let items = []
          const contentDetail = response.data.contentDetail || ''

          if (contentDetail) {
            items = contentDetail.split(';')
          }
          // 答案
          _this.entity.items = items
        }
      })
    },
    getPre() {
      const _this = this
      const actionUrl = this.HOST + '/base/answer-base-paper-item/' + 'initEditPage'
      this.entityId = Number(this.entityId) - 1
      axios({
        url: actionUrl,
        method: 'post',
        params: { id: this.entityId }
      }).then(response => {
        console.log('response')
        console.log(response)
        let items = []
        _this.entity = {}
        if (response.data) {
          _this.entity = response.data
          const contentDetail = response.data.contentDetail || ''

          if (contentDetail) {
            items = contentDetail.split(';')
          }
          // 答案
          _this.entity.items = items
        }
      })
    }
  }
}
</script>
